<link rel="stylesheet" type="text/css" href="<?=base_url()?>/css/ColVis.css">
<script type="text/javascript" src="<?=base_url()?>/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>/js/FixedColumns.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>/js/ColVis.min.js"></script>
<h3 class="ui-widget-header widget-header ui-corner-all">Course Management</h3>
<div class="widget-content">
	<div class="input-staff-profile">
		<button class="btn-add-staff">Add Course</button>
		<button class="btn-delete-staff">Delete Course</button>
	</div>
	<table class="staff-list">
		<thead>
			<th>No</th>
			<th>Name</th>
			<th>Date of birth</th>
			<th>Ecode</th>
			<th>Status</th>
			<th>Date Modified</th>
			<th></th>
		</thead>
		<tfoot>
			<th>No</th>
			<th>Name</th>
			<th>Date of birth</th>
			<th>Ecode</th>
			<th>Status</th>
			<th>Date Modified</th>
			<th></th>
		</tfoot>
		<tbody>
			<tr>
				<td>a</td>
				<td>b</td>
				<td>c</td>
				<td>d</td>
				<td>e</td>
				<td>f</td>
				<td>g</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>f</td>
				<td>g</td>
			</tr>
		</tbody>
	</table>
</div>
<script type="text/javascript">
	var oTable = $(".staff-list").dataTable({
		"bLengthChange": false,
		"sScrollY": "490px",
		"sScrollX" : "100%",
        "sScrollXInner" : "1500px",
        "aaSorting" : [[1,'asc']],
        "bFilter": true,
        "asStripClasses": null,
        //"bScrollCollapse": true,
        "bJQueryUI": true,
        "bPaginate": false,
        //"sPaginationType": "full_numbers",
        "iDisplayLength": -1,
        "whitespace": "nowrap",
      	"sDom": '<"toolbar">lfrtip',
        "aoColumns":[
        	{"sWidth": '20px', "bSortable": false},
        	{"sWidth": '130px', "bSortable": false},
        	{"sWidth": '400px', "bSortable": false},
        	{"sWidth": '100px', "bSortable": false},
        	{"sWidth": '100px', "bSortable": false},
        	{"sWidth": '100px', "bSortable": false},
        	{"sWidth": '100px', "bSortable": false}
        ]
    });

    new FixedColumns( oTable, {
    	"iLeftColumns" : 2,
    	"iLeftWidth" : 350
    });

    $(".input-staff-profile").appendTo(".toolbar");

    $("input[name=select-all]").click(function(){
    	if($("input[name=select-all]").is(":checked"))
    	{
    		$("input[name=select]").attr("checked", true);
    	}
    	else
    	{
    		$("input[name=select]").attr("checked", false);
    	}
    });

    //setup add button
    $(".btn-add-staff").button({
    	icons:{
    		primary: "ui-icon-plusthick"
    	}
    }).removeClass("ui-widget");

    //setup delete button
    $(".btn-delete-staff").button({
    	icons:{
    		primary: "ui-icon-trash"
    	}
    }).removeClass("ui-widget");

    $(".btn-add-staff").click(function(){
    	window.location = "<?=base_url()?>index.php/hro/edit_staff/";
    });
</script>